<template>
  <div class="user-card" @click="handleClick">
    <div class="user-avatar">
      <el-avatar
        :size="avatarSize"
        :src="formatAvatarUrl(user.avatar)"
        :alt="user.nickName || user.userName"
        fit="cover"
      >
        <template #default>
          <el-icon><UserFilled /></el-icon>
        </template>
      </el-avatar>
    </div>

    <div class="user-info">
      <div class="user-name">
        <h4>{{ user.nickName || user.userName }}</h4>
        <span class="username">@{{ user.userName }}</span>
      </div>

      <div v-if="showStats" class="user-stats">
        <span class="stat-item">{{ user.articleCount }} 文章</span>
        <span class="stat-item"
          >{{ formatNumber(user.followerCount) }} 粉丝</span
        >
      </div>

      <div v-if="showMeta" class="user-meta">
        <slot name="meta">
          <span v-if="user.followTime" class="follow-time">
            关注于 {{ formatTime(user.followTime) }}
          </span>
        </slot>
      </div>

      <div v-if="showTags" class="user-tags">
        <el-tag v-if="user.isFollowBack" size="small" type="success">
          互相关注
        </el-tag>
      </div>
    </div>

    <div v-if="showActions" class="user-actions">
      <slot name="actions">
        <FollowButton
          :user-id="user.userId"
          :is-followed="user.isFollowBack || false"
          size="small"
          @follow-change="handleFollowChange"
        />
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";
import { UserFilled } from "@element-plus/icons-vue";
import { formatNumber, formatTime, type FollowUser } from "@/api/user-profile";
import { formatAvatarUrl } from "@/utils/avatar";
import FollowButton from "./FollowButton.vue";

interface Props {
  user: FollowUser;
  avatarSize?: number;
  showStats?: boolean;
  showMeta?: boolean;
  showTags?: boolean;
  showActions?: boolean;
  clickable?: boolean;
}

interface Emits {
  (e: "click", user: FollowUser): void;
  (e: "follow-change", userId: number, isFollowed: boolean): void;
}

const props = withDefaults(defineProps<Props>(), {
  avatarSize: 60,
  showStats: true,
  showMeta: true,
  showTags: true,
  showActions: true,
  clickable: true
});

const emit = defineEmits<Emits>();
const router = useRouter();

// formatAvatarUrl 函数现在从工具模块导入

// 计算属性
const cardClass = computed(() => ({
  "user-card": true,
  clickable: props.clickable
}));

// 方法
const handleClick = () => {
  if (props.clickable) {
    emit("click", props.user);
    router.push(`/user/${props.user.userId}`);
  }
};

const handleFollowChange = (isFollowed: boolean) => {
  emit("follow-change", props.user.userId, isFollowed);
};
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .user-card {
    padding: 16px;

    .user-info {
      .user-name {
        h4 {
          font-size: 14px;
        }
      }
    }
  }
}

.user-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.3s ease;

  &.clickable {
    cursor: pointer;

    &:hover {
      border-color: #409eff;
      box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
      transform: translateY(-2px);
    }
  }

  .user-avatar {
    flex-shrink: 0;
  }

  .user-info {
    flex: 1;
    min-width: 0;

    .user-name {
      margin-bottom: 8px;

      h4 {
        margin: 0 0 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 16px;
        font-weight: 600;
        color: #1a202c;
        white-space: nowrap;
      }

      .username {
        font-size: 12px;
        color: #64748b;
      }
    }

    .user-stats {
      display: flex;
      gap: 12px;
      margin-bottom: 8px;

      .stat-item {
        font-size: 12px;
        color: #64748b;
      }
    }

    .user-meta {
      margin-bottom: 8px;

      .follow-time {
        font-size: 12px;
        color: #94a3b8;
      }
    }

    .user-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
  }

  .user-actions {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
  }
}
</style>
